<template>
    <div>
        <div style="margin: 10px 0" @keyup.enter="query()">
            <span>
                状态：
                <Select v-model="searchData.status"  placeholder="请选择" style="width:100px">
                    <Option value="">--请选择--</Option>
                    <Option value="1">启用中</Option>
                    <Option value="0">已禁用</Option>
                    <Option value="2">已失效</Option>
                </Select>
            </span>

            <span>
                备注：<Input v-model="searchData.remark" placeholder="备注" style="width: 120px"/>
            </span>
            <span>
                开始时间
             <DatePicker type="datetime" @on-change="StartDate1"  format="yyyy-MM-dd"  v-model="searchData.begin_time"  placeholder="选择时间" style="width: 200px"></DatePicker>
            </span>
            <span>
                结束时间
             <DatePicker type="datetime"   v-model="searchData.end_time" format="yyyy-MM-dd"  placeholder="选择时间" style="width: 200px"></DatePicker>
            </span>
            <Button type="primary" icon="ios-search" @click="query">搜索</Button>
        </div>



        <Table border :columns="columns" :data="data"></Table>
        <div style="position: relative">
            <div class="m-button">
                <Button type="primary" icon="printer"   @click="show_detail('')"  style="float: right">添加</Button>
            </div>
            <Page style="text-align: right;padding-top: 10px;"
                  :page-size="searchData.pageSize"
                  @on-page-size-change="pageSizeFn"
                  @on-change="pageFn"
                  :total="total" show-sizer show-total></Page>
        </div>
        <Modal v-model="audit_modal" :title="''+audit_modal_title+''" >
            <div style="margin-bottom: 10px;margin-top: 20px; height: 450px" >
                <Form  :label-width="150">
                    <Tabs value="1" style="margin-top: -30px;height: 450px" @on-click="getName">
                        <TabPane label="固定时间"  name="1">
                            <FormItem label="开始时间：">
                                <DatePicker type="datetime"  @on-change="StartDate" format="yyyy-MM-dd HH:mm:ss"  placement="bottom-start" v-model="addData.begin_time"  placeholder="选择时间" style="width: 200px"></DatePicker>
                            </FormItem>
                            <FormItem label="结束时间：">
                                <DatePicker type="datetime" @on-change="StopDate"  format="yyyy-MM-dd HH:mm:ss"  v-model="addData.end_time"  placeholder="选择时间" style="width: 200px"></DatePicker>
                            </FormItem>
                            <FormItem label="状态：">
                                <RadioGroup v-model="addData.status">
                                    <Radio label="1">启用</Radio>
                                    <Radio label="0">禁用</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem label="备注：">
                                <Input v-model="addData.remark"   type="textarea" placeholder="请输入..."  style="width: 300px"/>
                            </FormItem>
                            <span style="color: red;">
                                 注意：如果已有当日数据的开始时间大于新添加数据的开始时间或结束时间小于新添加的结束时间，会删除之前数据重新添加新设置数据
                             </span>
                        </TabPane>
                        <TabPane label="常规时间" name="2">
                            <FormItem label="开始时间：">
                                <TimePicker @on-change="StartDate" confirm placeholder="选择时间" v-model="addData.begin_time"  style="width: 200px"></TimePicker>
                            </FormItem>
                            <FormItem label="结束时间：">
                                <TimePicker  @on-change="StopDate" confirm placeholder="选择时间"  v-model="addData.end_time" style="width: 200px"></TimePicker>
                            </FormItem>
                            <FormItem label="状态：">
                                <RadioGroup v-model="addData.status">
                                    <Radio label="1">启用</Radio>
                                    <Radio label="0">禁用</Radio>
                                </RadioGroup>
                            </FormItem>

                            <FormItem label="生效时间：">
                                <Checkbox-group v-model="fruit" @on-change="check">
                                    <Checkbox label="1">星期一</Checkbox>
                                    <Checkbox label="2">星期二</Checkbox>
                                    <Checkbox label="3">星期三</Checkbox>
                                    <Checkbox label="4">星期四</Checkbox>
                                    <Checkbox label="5">星期五</Checkbox>
                                    <Checkbox label="6">星期六</Checkbox>
                                    <Checkbox label="7">星期天</Checkbox>
                                </Checkbox-group>

                            </FormItem>

                            <FormItem label="备注：">
                                <Input v-model="addData.remark"   type="textarea" placeholder="请输入..."  style="width: 300px"/>
                            </FormItem>
                            <span style="color: red;">
                                 注意：当设定的开始时间大于或者等于结束时间，系统默认结束时间到第二天
                             </span>
                        </TabPane>
                    </Tabs>
                </Form>
            </div>
            <div slot="footer">
                <Button type="ghost" size="large"  @click="closeModal">取消</Button>
                <Button type="primary" size="large"  @click="save">保存</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import API from '../../config/api'
    import qs from 'qs'
    import {formatDateTime} from '../../config/utils'

    export default {
        props: ["type"],
        data() {
            let addTitle ='';
            if(this.type == '2'){
                addTitle = '添加交易时间限制'
            }else {
                addTitle = '添加提取时间限制'
            }
            return {
                fruit: [],
                searchTime:[],
                audit_modal: false,
                audit_modal_title: addTitle,
                total:0,
                addData:{
                    status:'1',
                    begin_time: '',
                    end_time:'',
                    remark:'',
                    type:this.type,
                    set_type:'1',
                    effective_time:[]
                },
                searchData:{
                    pageSize: 10,
                    pageNum: 1,
                    status:'',
                    begin_time: '',
                    end_time:'',
                    remark:'',
                    type:this.type
                },
                columns: [
                    {
                        title: '开始时间',
                        key: 'begin_time',
                    },
                    {
                        title: '结束时间',
                        key: 'end_time',
                    },
                    {
                        title: '备注',
                        key: 'remark',
                    },
                    {
                        title: '创建时间',
                        key: 'create_time',
                        render: (h, params) => {
                            const time = formatDateTime(params.row.create_time*1000);
                            return h('span', time)
                        }
                    },
                    {
                        title: '状态',
                        key: 'status',
                        sortable: true,

                        render: (h, params) => {
                            const type = params.row.status
                            let text = '';
                            let color = '';
                            if(type == 1){
                                text = '启用中';
                            }else if(type == 0){
                                text = '禁用中';
                                color = 'red';
                            }else if(type == 2){
                                text = '已失效';
                                color = 'blue'
                            }
                            return h('span', {
                                style: {
                                    color: color
                                }
                            }, text);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        fixed: 'right',
                        width: 120,
                        render: (h, params) => {
                            const row = params.row;
                            let examineH ;
                            if(row.status == 1) {
                                examineH = h('div', [
                                    h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                   style: {
                                            marginRight: '5px'
                                        },
                                    on: {
                                        click: () => {
                                            this.updateStatus(row.id, 0);
                                        }
                                    }
                                    },'禁用'),
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        on: {
                                            click: () => {
                                                this.delete(row.id);
                                            }
                                        }
                                    },'删除')
                                ]);
                            }else if(row.status == 0){
                                examineH = h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'info',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.updateStatus(row.id, 1);
                                            }
                                        }
                                    },'启用'),
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        on: {
                                            click: () => {
                                                this.delete(row.id);
                                            }
                                        }
                                    },'删除')
                                ],);
                            }else if(row.status == 2){
                                examineH = h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.delete(row.id);
                                        }
                                    }
                                }, '删除');
                            }
                            return h('div', [
                                examineH
                            ]);
                        }
                    }
                ],
                data: []
            }
        },
        methods:{
            check(value){
                this.addData.effective_time = "";
                let tovalue = value.toString();
                this.addData.effective_time = tovalue;
            },
            query(){
                let vm = this;
                this.searchData.begin_time = this.searchData.begin_timeStr;
                this.axios.get( '/zscar-api/sales/order/getTransactionTimeRange?' + qs.stringify(vm.searchData)).then(response => {
                    if (response.data.code === 1) {
                        this.data = response.data.data.list;
                        this.total = response.data.data.total;
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                }, response => {
                    this.$Message.error('网络异常!');
                })
            },
            //《-------审核开始-----------------》
            show_detail(data){//打开审核窗口
                this.fruit = [];
                this.addData.effective_time == null;
                this.audit_modal = true;
            },
            verification(bend,end ){
                if (bend > end) {
                    return true
                }
                return false
            },
            emptyData(){
                this.addData.begin_time = null;
                this.addData.end_time = null;
                this.addData.effective_time = null;
                this.addData.remark = null;
            },
            save(){
                let flag = this.verification(this.addData.begin_time,this.addData.end_time)
                if(this.addData.begin_time == null || this.addData.begin_time == ""){
                    return this.$Message.error('开始时间不能为空!');
                }
                if(this.addData.end_time == null || this.addData.end_time == ""){
                    return this.$Message.error('结束时间不能为空!');
                }

                if(flag && this.addData.set_type != '2') {
                    return this.$Message.error('开始时间不能大于结束时间!');
                }
                if(this.addData.set_type == '2' && this.addData.effective_time == null){
                    return this.$Message.error('生效时间不能为空!');
                }
                if(this.addData.remark == null || this.addData.remark == ""){
                    return this.$Message.error('备注不能为空!');
                }
                this.addData.begin_time = this.addData.begin_timeStr;
                this.addData.end_time = this.addData.end_timeStr;
                let params = qs.stringify(this.addData);
                this.axios.get('/zscar-api/sales/order/addTransactionTimeRange?'+ params).then(response => {
                    if (response.data.code === 1) {
                        this.closeModal();
                        this.$Message.success(response.data.msg);
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                    this.modal = false;
                }, response => {
                    this.$Message.error('网络异常!');
                })
                this.emptyData();
            },

            updateStatus(id, status){//提交审核信息
                let par = {
                };
                let params = qs.stringify(par);
                this.axios.post('/zscar-api/sales/order/update/'+id+'/'+status, params).then(response => {
                    if (response.data.code === 1) {
                        this.closeModal();
                        this.$Message.success(response.data.msg);
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                    this.modal = false;
                }, response => {
                    this.$Message.error('网络异常!');
                })
            },
            delete(id){//提交审核信息
                let par = {
                };
                let params = qs.stringify(par);
                console.log(status)
                this.axios.post('/zscar-api/sales/order/delete/'+id, params).then(response => {
                    if (response.data.code === 1) {
                        this.closeModal();
                        this.$Message.success(response.data.msg);
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                    this.modal = false;
                }, response => {
                    this.$Message.error('网络异常!');
                })
            },
            //开始日期
            StartDate1 (data) {
                this.searchData.begin_timeStr = data;
            },
            //开始日期
            StartDate (data) {
                this.addData.begin_timeStr = data;
            },
            //结束日期
            StopDate (data) {
                this.addData.end_timeStr = data;
            },
            //《-------审核结束-----------------》
            pageSizeFn(size) {
                this.searchData.pageSize = size;
                this.query();
            },
            pageFn(pageNum) {
                this.searchData.pageNum = pageNum;
                this.query();
            },
            closeModal() {
                this.audit_modal = false;
                this.query();
            },
            getName(event) {
               this.addData.set_type = event;
            }

        },
        created(){
            this.query();
        }
    }
</script>
<style scoped>
    .m-button {
        position: absolute;
        top: 0;
        left: 0;
    }

    .m-button button {
        margin-top: 10px;
        margin-right: 15px;
    }
</style>
